<template>
   <div class="soul">
     <mt-header  fixed  >
  <router-link to="/menu/badroom" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
<div class="soul-main">

    <!-- 轮播图 -->
      <div class="soul-swiper">
         <mt-swipe  :auto="3000" >
            <mt-swipe-item v-for="item of list" :key="item.id"> <img :src="item.img" /></mt-swipe-item>
         </mt-swipe>
      </div>
<!-- 详情 -->

    <div v-for="val of todos" :key='val.id' class="soul-deta">
       
        <h1>{{val.title}}</h1>
        <h2>{{val.desrc}}</h2>
        <h3>商品编码：{{val.itt}}</h3>
        <h4>销售价：<span>￥{{val.price}}</span></h4>
    </div>
<div>
    <span @click="pinglun(1)">评论</span>
    <span @click="pinglun(2)">详情</span>
</div>
  <div>
    <p v-if="xxx">{{a}}</p>
    <p v-else>{{b}}</p>
  </div>
 
  <!-- 底部购物车tarbar -->
        <div class="soul-heart">
            <Heart :ab="todos"/>
        </div>
        
    </div>    
  </div>
     
</template>

<script>


import { Header } from 'mint-ui';
import { Swipe, SwipeItem } from 'mint-ui';
import Heart from '../components/Heart'
export default {
    methods:{
        pinglun(id){
         if(id===1){
             this.xxx=true
         }else(
             this.xxx=false
         )
        },
       
    },
    data () {
        return {
            list:[],
            todos:{},
            a:'a',
            b:'b',
            xxx:null
        }
    },
   
 components:{
      'mt-header':Header,
      'mt-swipe':Swipe,
       'mt-swipe-item':SwipeItem,
       Heart
  },
    created(){
      console.log(this)
      this.$http.get('http://rap2api.taobao.org/app/mock/86910/api/detail_swip')
        .then(resp=>{
           this.list=resp.data.data
        }),
     this.$http.get('http://rap2api.taobao.org/app/mock/86910/api/lll/:'+this.$route.params)
        .then(resp=>{
         this.todos=resp.data.data
        })
    }
   
}
</script>

<style lang="scss">
.mint-header-title{
    color: black;
    
}
.mint-button-icon{
   color: black;
 
    width: 22px;
    height: 22px;
    margin-top: 5px;
    border-radius: 50%;
    background: #e9e9e9;
}
.mint-header{
   background: none;
}

.soul-swiper{
   height: 412px;
   width: 412px;
   position: relative;
   display: flex;
   
   img{
   height: 412px;
   width: 412px;
   }
}
.mint-swipe{
  
 position: absolute;
 top: 0;
 left: 0;
  height: 412px;
   width: 412px;
}
.soul{
    overflow: hidden;
    height: 100%;
    &-main{
        height: 100%;
        overflow-x: hidden;
    }
     &-heart{
         position: fixed;
         bottom: 0;
         width: 100%;
        height: 52px;
       
    }
  
}

.soul-deta{
 h1, h2, h3, h4{
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    
        }
}
.soul-deta {
    h1{
        font-size: 18px;
        margin-top: 10px;
    margin-bottom: 10px;
    }
    h2{
            color: #bbb;
                font-size: 14px;
                margin-top: 10px;
    margin-bottom: 10px;
    }
    h3{
        margin: 0 0 10px;
    }
    
        span {
            color: #b10000;
        }
    
} 
</style>
